<template>
  <div class="container-3d">
    <div class="left">
      <div
        v-if="!leftTopShow"
        class="yc-botton-show"
        style="margin-top: 10px"
        @click="
          () => {
            this.leftTopShow = true;
          }
        "
      >
        <div>
          <img
            src="@/assets/img/xs-button.png"
            style="width: 28px; height: 28px"
          />
        </div>
        <div>站点温度</div>
      </div>
      <transition name="el-zoom-in-top">
        <Left
          :sitemessage="sitemessage"
          style="padding-top: 25px"
          v-show="leftTopShow"
          @display="
            () => {
              leftTopShow = false;
            }
          "
        />
      </transition>
    </div>
    <div class="left-bottom">
      <div
        class="yc-botton-show"
        v-if="!leftBottonShow"
        @click="
          () => {
            this.leftBottonShow = true;
          }
        "
      >
        <div>
          <img
            src="@/assets/img/xs-button.png"
            style="width: 28px; height: 28px"
          />
        </div>
        <div>站点天气</div>
      </div>
      <transition name="el-zoom-in-top">
        <dv-border-box-12
          style="padding-top: 1px; background-color: rgba(19, 81, 156, 0.1)"
          v-show="leftBottonShow"
        >
          <div class="weather" style="padding-top: 20px">
            <div
              class="yc-botton"
              @click="
                () => {
                  this.leftBottonShow = false;
                }
              "
            >
              <img
                src="@/assets/img/yc-button.png"
                style="width: 20px; height: 20px"
              />
            </div>
            <h2>{{ weathermsg.province }}{{ weathermsg.city }}</h2>
            <span>空气湿度:</span>
            <span>{{ weathermsg.humidity }}</span>
            <span>温度:</span>
            <span>{{ weathermsg.temperature }}℃</span>
            <span>天气状况:</span>
            <span>{{ weathermsg.weather }}</span>
          </div>
        </dv-border-box-12>
      </transition>
    </div>
    <transition name="el-zoom-in-top">
      <div
        class="right"
        v-if="
          siteNo && selectAisleTempIndex != null && selectAisleTempIndex != ''
        "
      >
        <Right
          v-if="selectAisleTempIndex != null && selectAisleTempIndex != ''"
          :siteNo="siteNo"
          :aisleNo="selectAisleNo"
          :index="selectAisleTempIndex"
        />
      </div>
    </transition>
    <div class="avgtemp" style="padding-top: 25px">
      <div
        v-if="!avgtempShow"
        class="yc-botton-show"
        style="position: absolute; left: 20px; bottom: 20px"
        @click="
          () => {
            this.avgtempShow = true;
          }
        "
      >
        <div>
          <img
            src="@/assets/img/xs-button.png"
            style="width: 20px; height: 20px"
          />
        </div>
        <div>电池仓均温</div>
      </div>
      <transition name="el-zoom-in-bottom">
        <dv-border-box-12
          style="padding-top: 20px; background-color: rgba(19, 81, 156, 0.1)"
          v-show="avgtempShow"
        >
          <div
            class="yc-botton"
            style="margin-left: 20px"
            @click="
              () => {
                this.avgtempShow = false;
              }
            "
          >
            <img
              src="@/assets/img/yc-button.png"
              style="width: 20px; height: 20px"
            />
          </div>
          <div class="txt clearfix">
            <span>最新数据时间</span>
            <span>{{ avgmessage.time }}</span>
            <span>一层电池仓均温</span>
            <span>{{ avgmessage.level1 }}℃</span>
            <span>二层电池仓均温</span>
            <span>{{ avgmessage.level2 }}℃</span>
            <span>三层电池仓均温</span>
            <span>{{ avgmessage.level3 }}℃</span>
            <span>四层电池仓均温</span>
            <span>{{ avgmessage.level4 }}℃</span>
          </div>
          <div id="avgchart" class="avg-chart"></div>
        </dv-border-box-12>
      </transition>
    </div>
    <div class="right-bottom">
      <Bottom
        :siteNo="siteNo"
        :datalist="dataList"
        @alarmListChange="alarmListChange"
      />
    </div>

    <transition name="el-zoom-in-top">
      <div class="right-center">
        <div
          v-if="!rightCenterShow"
          class="yc-botton-show"
          style="margin-top: 10px"
          @click="
            () => {
              this.rightCenterShow = true;
            }
          "
        >
          <div>
            <img
              src="@/assets/img/xs-button.png"
              style="width: 28px; height: 28px"
            />
          </div>
          <div>设备信息</div>
        </div>
        <transition name="el-zoom-in-top">
          <dv-border-box-12
            style="padding: 8px; background-color: rgba(19, 81, 156, 0.1)"
            v-if="rightCenterShow"
          >
            <div
              class="yc-botton"
              style="margin-right: 5px; margin-top: 0px"
              @click="
                () => {
                  this.rightCenterShow = false;
                }
              "
            >
              <img
                src="@/assets/img/yc-button.png"
                style="width: 20px; height: 20px"
              />
            </div>
            <table
              style="
                margin-top: 4px;
                margin-left: 4px;
                border-spacing: 0px 10px;
              "
            >
              <tr>
                <td>设备信息:</td>
                <td style="padding-left: 10px">
                  {{ deviceDetails.deviceInfo }}
                </td>
              </tr>
              <tr>
                <td>出厂年月:</td>
                <td style="padding-left: 10px">
                  {{ deviceDetails.factoryYearMonth }}
                </td>
              </tr>
              <tr>
                <td>过期状态:</td>
                <td
                  style="padding-left: 10px"
                  :class="
                    deviceDetails.status.indexOf('本月') != -1
                      ? 'status-red'
                      : ''
                  "
                >
                  {{ deviceDetails.status }}
                </td>
              </tr>
              <tr>
                <td>软件版本:</td>
                <td style="padding-left: 10px">
                  {{ deviceDetails.softwareVersion }}
                </td>
              </tr>
              <tr>
                <td>硬件版本:</td>
                <td style="padding-left: 10px">
                  {{ deviceDetails.hardwareVersion }}
                </td>
              </tr>
            </table>
          </dv-border-box-12>
        </transition>
      </div>
    </transition>

    <ColorGradient @gradient="getGradient" class="left-bottom-color" />

    <div id="chart-3d" class="chart-3d"></div>
  </div>
</template>

<script>
import Left from "./Left";
import Right from "./Right";
import Bottom from "./Bottom";
import {
  initRenderer,
  initCamera,
  initorbitControls,
  initSky,
  initComposer,
  initTween,
  getIntersects,
  selectMesh,
  removeMeshSelect,
  renderTemps,
} from "./3dUtils";
import { create56Aisle, destroy } from "./56AisleModel";
import ColorGradient from "../colorGradient/index";
export default {
  name: "Model3D",
  components: { Left, Right, Bottom, ColorGradient },
  watch: {
    aisleNo: {
      deep: true,
      handler: function (newV, oldV) {
        this.handleChannelSelect(newV, oldV);
      },
    },
    change() {
      this.getTempDatas();
    },
    sitemessage(n) {
      if (n.siteNo) {
        this.leftTopShow = true;
        this.leftBottonShow = true;
      }
    },
    avgmessage(n) {
      if (n.time) {
        this.avgtempShow = true;
      }
    },
    deviceDetails: {
      deep: true,
      handler: function (newV, oldV) {
        if (newV.deviceInfo) {
          this.rightCenterShow = true;
        }
      },
    },
  },
  props: {
    change: {
      type: Boolean,
    },
    //站点
    sitemessage: {
      type: Object,
    },
    dataList: {
      type: Array,
    },
    siteNo: {
      type: String,
    },
    //通道号
    aisleNo: {
      type: String,
    },
    deviceDetails: {
      type: Object,
    },
  },
  mounted() {
    if (this.siteNo != "") {
      this.getweather();
      this.getTempDatas();
    }
    this.getThresholdFn();
    this.init();
    this.add3DModel();
    this.handleChannelSelect(this.aisleNo, null);
    this.leftTopShow = this.sitemessage.siteNo;
    this.leftBottonShow = this.sitemessage.siteNo;
  },
  data() {
    return {
      leftTopShow: false,
      leftBottonShow: false,
      rightCenterShow: false,
      avgtempShow: false,
      $chart: "",
      selectAisleNo: "", //当前选中的通道
      selectAisleTempIndex: "", //当前选中通道上测温点的索引 1开始
      selectObject: Object, //当前选中的对象
      alarmObjects: {
        level1Meshs: [],
        level2Meshs: [],
        level3Meshs: [],
        hartUp: [],
        constant: [],
      }, //告警的Mesh数组
      cameraVector: new THREE.Vector3(-600, 1000, 2000), //相机位置
      geometryModel: null,
      meshGroupList: [],
      groupModel: [],
      groupTempDot: [],
      weathermsg: {},
      avgmessage: {},
      historyavg: {},
      activity: true,
      warehouse: {},
      cabinet: {},
      line: {},
      scene: Object,
      renderer: Object,
      camera: Object,
      composer: Object,
      outlinePass: Object,
      outlinePass2: Object,
      outlinePass3: Object,
      hartUp: Object,
      constant: Object,
      outlinePassSelect: Object,
      trackballControls: Object,
      clock: Object,
      materials: Object,
      tempTV: Object, //用于存储站点的告警阈值数据
      temps: Array, //用于存储站点所有测温点的温度数据
      aisleInterval: Object, //用于存储各个通道类型的通道数
      gradient: Object, //用于存储温度梯度值
      option: {
        backgroundColor: "transparent",
        color: [
          "rgba(7, 226, 205, 1)",
          "rgba(252, 161, 0, 1)",
          "rgba(253, 63, 25, 1)",
          "rgba(167, 124, 253, 1)",
        ],
        legend: {
          icon: "circle",
          top: "2%",
          left: "5%",
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#132452",
          textStyle: {
            color: "#fff",
          },
          padding: [10, 10],
        },
        grid: {
          wdith: "auto",
          left: "15%",
          right: 0,
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        xAxis: [
          {
            type: "category",
            data: [],
            axisLine: {
              lineStyle: {
                color: "#133579",
                width: 2,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
              interval: "auto",
              // 默认x轴字体大小
              fontSize: 12,
              // margin:文字到x轴的距离
              margin: 10,
            },
            boundaryGap: false,
          },
        ],
        yAxis: {
          type: "value",
          scale: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            how: true,
            lineStyle: {
              width: 2,
              color: "#133579",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#11366e",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "一层",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
            markLine: {
              label: {
                position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                formatter: "",
              },
              data: [
                {
                  lineStyle: {
                    //警戒线的样式  ，虚实  颜色
                    type: "solid",
                    color: "#FCB724",
                    width: 2,
                  },
                  yAxis: "", //警戒线在y轴的坐标
                },
              ],
            },
          },
          {
            name: "二层",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
          {
            name: "三层",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
          {
            name: "四层",
            type: "line",
            data: [],
            symbolSize: 1,
            symbol: "circle",
            smooth: true,
            showSymbol: false,
          },
        ],
      },
    };
  },
  methods: {
    getGradient(gradient, load) {
      this.gradient = gradient;
      if (load) {
        this.getTempDatas();
      }
    },
    //获取站点所有测温点的最新数据
    getTempDatas() {
      let self = this;
      this.$http
        .get("/redis/siteTempData/" + this.siteNo)
        .then((res) => {
          if (res.data.h.code == 0) {
            let data = res.data.b;
            if (!data.aisleNum) {
              this.$message.info("站点各通道类型未配置");
            } else {
              this.tempTV = data.tempTV;
              this.temps = data.data;
              this.aisleInterval = data.aisleNum;
              renderTemps(
                self.scene,
                this.temps,
                this.tempTV,
                this.aisleInterval,
                this.gradient
              );
            }
          }
        })
        .catch((err) => {});
    },
    //获取天气信息
    getweather() {
      this.$http
        .get("/site/device/siteWeather/" + this.siteNo)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.weathermsg = res.data.b;
            sessionStorage.setItem("temperature", this.weathermsg.temperature);
          }
        })
        .catch((err) => {});
    },
    //获取站点电池仓各层的平均温度
    getavg() {
      if (!this.siteNo) {
        return;
      }
      this.$http.get("/redis/warehouseAvg/" + this.siteNo).then((res) => {
        if (res.data.h.code == 0) {
          this.avgmessage = res.data.b;
        }
      });
    },
    //获取电池仓层均温历史数据
    gethistoryavg() {
      if (!this.siteNo) {
        return;
      }
      this.$http
        .get("/redis/houseAvgHistory/" + this.siteNo + "/360")
        .then((res) => {
          if (res.data.h.code == 0) {
            this.historyavg = res.data.b;
            let tempeture = JSON.parse(sessionStorage.getItem("temperature"));
            this.$chart = this.$echarts.init(
              document.getElementById("avgchart")
            );
            let bigarr = res.data.b.level1.concat(
              res.data.b.level2,
              res.data.b.level3,
              res.data.b.level4
            );
            let max = Math.ceil(Math.max(...bigarr));
            let min = Math.floor(Math.min(...bigarr));
            if (min >= tempeture) {
              min = tempeture - 1;
            }
            if (max <= tempeture) {
              max = tempeture + 1;
            }
            this.$chart.setOption(this.option);
            this.$chart.setOption({
              xAxis: [
                {
                  data: this.historyavg.time.reverse(),
                },
              ],
              yAxis: {
                min: min,
                max: max,
              },
              series: [
                {
                  data: this.historyavg.level1.reverse(),
                  markLine: {
                    label: {
                      position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
                      formatter: tempeture,
                    },
                    data: [
                      {
                        yAxis: tempeture, //警戒线在y轴的坐标
                      },
                    ],
                  },
                },
                {
                  data: this.historyavg.level2.reverse(),
                },
                {
                  data: this.historyavg.level3.reverse(),
                },
                {
                  data: this.historyavg.level4.reverse(),
                },
              ],
            });
          }
        });
    },
    init() {
      this.renderer = initRenderer();
      this.scene = new THREE.Scene();
      this.camera = initCamera(this.cameraVector);
      let {
        composer,
        outlinePass,
        outlinePass2,
        outlinePass3,
        hartUp,
        constant,
        outlinePassSelect,
      } = initComposer(
        this.scene,
        this.camera,
        this.renderer,
        this.alarmObjects
      );
      this.composer = composer;
      this.outlinePass = outlinePass;
      this.outlinePass2 = outlinePass2;
      this.outlinePass3 = outlinePass3;
      this.hartUp = hartUp;
      this.constant = constant;
      this.outlinePassSelect = outlinePassSelect;
      this.trackballControls = initorbitControls(this.camera, this.renderer);
      this.clock = new THREE.Clock();
      initSky(this.scene);
      initTween(this.camera);
      this.renderScene();
      addEventListener("resize", this.onWindowResize, false); //窗口变动触发的方法
      addEventListener("keydown", this.onKeyDown, false); //键盘按下触发的方法
      addEventListener("click", this.onMouseDblclick, false); // 鼠标双击触发的方法
    },
    add3DModel() {
      //TODO 根据通道类型，加载不同的3d模型
      let arr = create56Aisle(this.scene);
      this.groupModel = arr[0];
      this.groupTempDot = arr[1];
      this.meshGroupList = arr[2];
      this.$emit("childFn", this.groupModel);
    },
    //场景渲染
    renderScene() {
      let { composer, renderScene, clock } = this;
      this.composer = composer;
      TWEEN.update();
      if (this.activity) {
        requestAnimationFrame(renderScene);
      }
      this.composer.render(clock.getDelta());
    },

    //处理通道选中事件
    handleChannelSelect(aisleNo, lastAisleNo) {
      if (!aisleNo || aisleNo == "") {
        return;
      }
      let currentSelect;
      let currentSelect0;
      let currentSelect1;
      let currentSelect2;
      let currentSelect3;
      if (this.scene.getObjectByName("channel_" + aisleNo)) {
        currentSelect = this.scene.getObjectByName("channel_" + aisleNo);
      }
      if (this.scene.getObjectByName("channel_" + aisleNo + "_0")) {
        currentSelect0 = this.scene.getObjectByName(
          "channel_" + aisleNo + "_0"
        );
      }
      if (this.scene.getObjectByName("channel_" + aisleNo + "_1")) {
        currentSelect1 = this.scene.getObjectByName(
          "channel_" + aisleNo + "_1"
        );
      }
      if (this.scene.getObjectByName("channel_" + aisleNo + "_2")) {
        currentSelect2 = this.scene.getObjectByName(
          "channel_" + aisleNo + "_2"
        );
      }
      if (this.scene.getObjectByName("channel_" + aisleNo + "_3")) {
        currentSelect3 = this.scene.getObjectByName(
          "channel_" + aisleNo + "_3"
        );
      }
      let lastSelect;
      let lastSelect0;
      let lastSelect1;
      let lastSelect2;
      let lastSelect3;
      if (this.scene.getObjectByName("channel_" + lastAisleNo)) {
        lastSelect = this.scene.getObjectByName("channel_" + lastAisleNo);
      }
      if (this.scene.getObjectByName("channel_" + lastAisleNo + "_0")) {
        lastSelect0 = this.scene.getObjectByName(
          "channel_" + lastAisleNo + "_0"
        );
      }
      if (this.scene.getObjectByName("channel_" + lastAisleNo + "_1")) {
        lastSelect1 = this.scene.getObjectByName(
          "channel_" + lastAisleNo + "_1"
        );
      }
      if (this.scene.getObjectByName("channel_" + lastAisleNo + "_2")) {
        lastSelect2 = this.scene.getObjectByName(
          "channel_" + lastAisleNo + "_2"
        );
      }
      if (this.scene.getObjectByName("channel_" + lastAisleNo + "_3")) {
        lastSelect3 = this.scene.getObjectByName(
          "channel_" + lastAisleNo + "_3"
        );
      }
      if (!currentSelect) {
        selectMesh(currentSelect0, lastSelect);
        selectMesh(currentSelect0, lastSelect0);
        selectMesh(currentSelect0, lastSelect1);
        selectMesh(currentSelect0, lastSelect2);
        selectMesh(currentSelect0, lastSelect3);

        selectMesh(currentSelect1, lastSelect);
        selectMesh(currentSelect1, lastSelect0);
        selectMesh(currentSelect1, lastSelect1);
        selectMesh(currentSelect1, lastSelect2);
        selectMesh(currentSelect1, lastSelect3);

        selectMesh(currentSelect2, lastSelect);
        selectMesh(currentSelect2, lastSelect0);
        selectMesh(currentSelect2, lastSelect1);
        selectMesh(currentSelect2, lastSelect2);
        selectMesh(currentSelect2, lastSelect3);

        selectMesh(currentSelect3, lastSelect);
        selectMesh(currentSelect3, lastSelect0);
        selectMesh(currentSelect3, lastSelect1);
        selectMesh(currentSelect3, lastSelect2);
        selectMesh(currentSelect3, lastSelect3);
      }
      if (!lastSelect) {
        selectMesh(currentSelect, lastSelect0);
        selectMesh(currentSelect, lastSelect1);
        selectMesh(currentSelect, lastSelect2);
        selectMesh(currentSelect, lastSelect3);
      } else {
        selectMesh(currentSelect, lastSelect);
      }
    },

    //处理告警信息
    alarmListChange(dataList) {
      this.alarmObjects.level1Meshs = [];
      this.alarmObjects.level2Meshs = [];
      this.alarmObjects.level3Meshs = [];
      this.alarmObjects.hrrtUp = [];
      this.alarmObjects.constant = [];
      this.outlinePass.selectedObjects = [];
      let self = this;
      dataList.some((alarm) => {
        let channel = alarm.channel; //告警通道
        let category = alarm.category;
        let level =
          alarm.alarmLevel == "one"
            ? 1
            : alarm.alarmLevel == "two"
            ? 2
            : alarm.alarmLevel == "three"
            ? 3
            : null; //告警等级
        // self.removeAlarmChannel(channel, level); //先判断并移除告警通道
        //获取告警通道的Mesh
        let alarmMesh = self.scene.getObjectByName("channel_" + channel);
        let alarmMesh0 = self.scene.getObjectByName(
          "channel_" + channel + "_0"
        );
        let alarmMesh1 = self.scene.getObjectByName(
          "channel_" + channel + "_1"
        );
        let alarmMesh2 = self.scene.getObjectByName(
          "channel_" + channel + "_2"
        );
        let alarmMesh3 = self.scene.getObjectByName(
          "channel_" + channel + "_3"
        );
        //将告警通道添加到告警数组中
        if (
          alarmMesh &&
          category == "温升告警" &&
          self.alarmObjects["hartUp"].indexOf(alarmMesh) == -1
        ) {
          self.alarmObjects["hartUp"].push(alarmMesh);
        }
        if (
          alarmMesh &&
          category == "定温告警" &&
          self.alarmObjects["constant"].indexOf(alarmMesh) == -1
        ) {
          self.alarmObjects["constant"].push(alarmMesh);
        }
        if (
          alarmMesh &&
          self.alarmObjects["level" + level + "Meshs"].indexOf(alarmMesh) == -1
        ) {
          self.alarmObjects["level" + level + "Meshs"].push(alarmMesh);
        }
        if (
          alarmMesh0 &&
          self.alarmObjects["level" + level + "Meshs"].indexOf(alarmMesh0) == -1
        ) {
          self.alarmObjects["level" + level + "Meshs"].push(alarmMesh0);
        }
        if (
          alarmMesh1 &&
          self.alarmObjects["level" + level + "Meshs"].indexOf(alarmMesh1) == -1
        ) {
          self.alarmObjects["level" + level + "Meshs"].push(alarmMesh1);
        }
        if (
          alarmMesh2 &&
          self.alarmObjects["level" + level + "Meshs"].indexOf(alarmMesh2) == -1
        ) {
          self.alarmObjects["level" + level + "Meshs"].push(alarmMesh2);
        }
        if (
          alarmMesh3 &&
          self.alarmObjects["level" + level + "Meshs"].indexOf(alarmMesh3) == -1
        ) {
          self.alarmObjects["level" + level + "Meshs"].push(alarmMesh3);
        }
      });
      this.outlinePass.selectedObjects = this.alarmObjects.level1Meshs;
      this.outlinePass2.selectedObjects = this.alarmObjects.level2Meshs;
      this.outlinePass3.selectedObjects = this.alarmObjects.level3Meshs;
      this.hartUp.selectedObjects = this.alarmObjects.hartUp;
      this.constant.selectedObjects = this.alarmObjects.constant;
    },

    //移除某个告警通道
    removeAlarm() {
      this.outlinePass.selectedObjects = [];
      this.outlinePass2.selectedObjects = [];
      this.outlinePass3.selectedObjects = [];
      this.hartUp.selectedObjects = [];
      this.constant.selectedObjects = [];
    },

    // 窗口变动触发的方法
    onWindowResize() {
      let self = this;
      removeMeshSelect(self.selectObject);
      self.selectObject = null;
      self.camera.aspect = window.innerWidth / window.innerHeight;
      self.camera.updateProjectionMatrix();
      self.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    // 键盘按下触发的方法
    onKeyDown(event) {
      let self = this;
      switch (event.keyCode) {
        case 13:
          initCamera(this.cameraVector);
          initorbitControls(this.camera, this.renderer);
          break;
      }
    },
    //鼠标点击事件 获取选中的测温点
    onMouseDblclick(event) {
      let self = this;
      var intersects = getIntersects(event, self.scene, self.camera, self.$);
      // 获取选中最近的 Mesh 对象
      if (
        intersects.length !== 0 &&
        intersects[0].object instanceof THREE.Mesh &&
        (intersects[0].object.geometry.type == "SphereGeometry" ||
          intersects[0].object.geometry.type == "CylinderGeometry")
      ) {
        let lastMesh = Object;
        if (self.selectObject) {
          lastMesh = self.scene.getObjectByName(self.selectObject.name);
        }
        self.selectObject = intersects[0].object;
        // selectMesh(self.selectObject, lastMesh, this.gradient);
        this.outlinePassSelect.selectedObjects = [self.selectObject];
        //选中的通道和测温点
        self.selectAisleNo = self.selectObject.passageway;
        self.selectAisleTempIndex = self.selectObject.index;
      }
    },
    //获取站点温度阈值
    getThresholdFn() {
      this.$http
        .get("/redis/alarmValue", {})
        .then((res) => {
          if (res.data.h.code == 0) {
            this.warehouse = res.data.b.warehouse;
            this.cabinet = res.data.b.cabinet;
            this.line = res.data.b.line;
          }
        })
        .catch((err) => {});
    },
    clearRenderer: function () {
      this.renderer.dispose();
      this.renderer.forceContextLoss();
      this.renderer.domElement = null;
      this.renderer = null;
    },
    clearCache: function (object) {
      let mesh = object;
      mesh.geometry.dispose();
      mesh.material.dispose();
    },
    clearmesh() {
      this.groupModel.traverse(function (item) {
        if (item instanceof THREE.Mesh) {
          item.geometry.dispose(); //删除几何体
          item.material.dispose(); //删除材质
        }
      });
      this.groupTempDot.traverse(function (item) {
        if (item instanceof THREE.Mesh) {
          item.geometry.dispose(); //删除几何体
          item.material.dispose(); //删除材质
        }
      });
    },
  },
  beforeDestroy() {
    removeMeshSelect(this.selectObject);
    this.activity = false; //页面是否活动,是否循环渲染renderScene
    this.clearCache(this.meshGroupList);
    this.clearmesh();
    // 删除场景对象scene的子对象group
    this.scene.remove(this.groupModel, this.groupTempDot);
    removeEventListener("resize", this.onWindowResize, false);
    removeEventListener("keydown", this.onKeyDown, false); //键盘按下触发的方法
    removeEventListener("click", this.onMouseDblclick, false); // 鼠标双击触发的方法
  },
};
</script>
<style scoped>
canvas {
  outline: none;
}
.container-3d {
  height: 75vh;
  position: relative;
  z-index: 2;
  outline: none;
}
.chart-3d {
  height: 100%;
  outline: none;
}
.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 15.6vw;
  height: 20vh;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
}
.left-bottom {
  position: absolute;
  left: 0;
  bottom: 70px;
  width: 300px;
  height: 150px;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
}
.avgtemp {
  position: absolute;
  left: 300px;
  bottom: 5px;
  height: 240px;
  box-sizing: border-box;
  color: #fff;
  z-index: 1;
}
.avgtemp .txt {
  width: 200px;
  display: inline-block;
  float: left;
}
.avgtemp .avg-chart {
  display: inline-block;
  float: left;
  width: 500px;
  height: 200px;
}
.avgtemp .txt span {
  display: inline-block;
  box-sizing: border-box;
  padding-left: 20px;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}
.left-bottom-color {
  position: absolute;
  left: 5px;
  bottom: 45px;
  width: 290px;
  height: 20px;
  box-sizing: border-box;
  z-index: 1;
}
.weather h2 {
  padding-left: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 500;
}
.weather span:nth-of-type(2n-1) {
  width: 30%;
}
.weather span:nth-of-type(2n) {
  width: 70%;
}
.weather span {
  display: inline-block;
  box-sizing: border-box;
  padding-left: 20px;
  float: left;
  height: 20px;
  line-height: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}
.right {
  position: absolute;
  width: 400px;
  right: 20px;
  top: 5px;
  box-sizing: border-box;
  border-radius: 5px;
  background: transparent;
  z-index: 3;
  color: #fff;
}
.right-bottom {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 400px;
  height: 200px;
}
.right-center {
  width: 300px;
  height: 155px;
  position: absolute;
  left: 0;
  top: 200px;
  margin-right: 20px;
  color: #fff;
  font-size: 13px;
}
.status-red {
  color: red;
}
.yc-botton {
  width: 20px;
  height: 20px;
  float: right;
  margin-right: 10px;
  margin-top: -10px;
}
.yc-botton-show {
  width: 100px;
  height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.yc-botton-show:hover {
  cursor: pointer;
}
.yc-botton:hover {
  cursor: pointer;
}
</style>
